<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>分享类型管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .layui-card {
            width: 80%;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="sharetype" lay-filter="sharetype"></table>
    </div>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add_share_content">添加分享</button>
    </div>
</script>
<script type="text/html" id="linebar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','table'], function () {
        let layer = layui.layer
            , form = layui.form
            $ = layui.$
            , table = layui.table;
        function getCookie(name) {
            var arr = document.cookie.split('; ');
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split('=');
                if (trim(arr2[0]) === name) {
                    return unescape(trim(arr2[1]));
                }
            }
            return '';
        }

        function trim(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }
        //第一个实例
        table.render({
            elem: '#sharetype'
            , height: 312
            ,toolbar: '#toolbar'
            , url: '/back/sharetypelist?user_id=' + getCookie("telphone") //数据接口
            , page: true //开启分页
            , cols: [
                [ //表头
                    {type: 'numbers', title: '序号',width: 80,fixed:'left'},
                    {field: 'id', title: 'ID',width:80 }
                    , {field: 'title', title: '分享标题'}
                    , {field: 'img', title: '预览图', templet:function (d) {
                            return '<img src="'+d.img+'" width="100" height="100">'
                    }},
                    {fixed:'right',title:'操作',toolbar:'#linebar',width:150}
                ]
            ]
        });

        //头工具栏事件
        table.on('toolbar(sharetype)', function(obj){

            switch(obj.event){
                case 'add_share_content':
                    addShareType();
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        table.on('tool(sharetype)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            console.log()
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.post('/back/del_sharetype',{id:data.id},function (resp) {
                        console.log(resp);
                        if(resp.code === '0'){
                            layer.msg(resp.msg);
                        }
                    })
                });
            } else if(layEvent === 'edit'){ //编辑
                editShareType(data);
                //同步更新缓存对应的值
                // obj.update({
                //     title: '123123123'
                // });
            }
            // else if(layEvent === 'LAYTABLE_TIPS'){
            //     layer.alert('Hi，头部工具栏扩展的右侧图标。');
            // }
        });

        function addShareType() {
            layer.open({
                type: 2,
                title:false,
                content:'/addsharetype',
                success: function(layero, index){
                    layer.full(index);
                }
            })
        }

        function editShareType(data) {
            layer.open({
                type:2,
                title:'',
                content:'/editsharetype?id='+data.id,
                success:function (layero,index) {
                    // const body = layer.getChildFrame('body', index);
                    // body.find('#title').val(data.title);
                    // body.find('#url').val(data.url);
                    // body.find('#sharetype').val(data.sharetype);
                    layer.full(index);
                }
            })
        }
    });
</script>
</body>
</html>